import { Component, OnInit } from '@angular/core'
import { FormBuilder, FormGroup } from '@angular/forms'
import { ModalService } from '@shared/utils'
import { PageService } from '@core/http'
import { Location } from '@angular/common'
import { QlMessageService } from 'qloud-angular/package/message/message.service'
import { Router } from '@angular/router'
import { ApiService } from '../../services/api.service'

@Component({
  selector: 'app-event-analysis',
  templateUrl: './event-analysis.component.html',
  styleUrls: ['./event-analysis.component.scss'],
  providers: [ModalService, PageService]
})
export class EventAnalysisComponent implements OnInit {
  twoIndex = 1

  legengs = ['转账', '汇款', '交易', '购买', '查询', '浏览', '申请', '咨询', '签约']

  legengs1 = ['网点', '网银', 'APP', '微信', '浏览', '无']
  constructor(
    public location: Location,
    private apiService: ApiService,
    private fb: FormBuilder,
    public modal: ModalService,
    public pageService: PageService,
    private message: QlMessageService,
    private router: Router
  ) {}

  public eventList = []

  public customerList = []

  lineOption: Array<any> = [
    {
      color: [
        '#f4c63d',
        '#40daf1',
        '#00abff',
        '#8bd22f',
        '#893448',
        '#d95850',
        '#eb8146',
        '#ffb248',
        '#f2d643',
        '#f95372',
        '#ebdba4'
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: []
      },
      grid: {
        top: '80',
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true
      },
      toolbox: {
        show: true,
        top: 10,
        right: 20,
        feature: {
          myTool1: {
            show: true,
            title: '数据列表',
            icon:
              'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
            onclick: () => {
              // this.twoHandle(2);
            }
          }
        }
      },
      xAxis: {
        type: 'category',
        axisPointer: {
          type: 'shadow'
        },
        data: []
      },
      yAxis: [
        {
          type: 'value',
          name: '次数',
          min: 0,
          max: 150,
          axisLabel: {
            formatter: '{value} 次'
          }
        },
        {
          type: 'value',
          name: '金额',
          min: 0,
          max: 200,
          axisLabel: {
            formatter: '{value} 万元'
          }
        }
      ],
      series: []
    }
  ]
  loading = false

  lineOption1: Array<any> = [
    {
      color: [
        '#f4c63d',
        '#40daf1',
        '#00abff',
        '#8bd22f',
        '#893448',
        '#d95850',
        '#eb8146',
        '#ffb248',
        '#f2d643',
        '#f95372',
        '#ebdba4'
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: []
      },
      grid: {
        top: '80',
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true
      },
      toolbox: {
        show: true,
        top: 10,
        right: 20,
        feature: {
          myTool1: {
            show: true,
            title: '数据列表',
            icon:
              'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
            onclick: () => {
              // this.twoHandle(2);
            }
          }
        }
      },
      xAxis: {
        type: 'category',
        axisPointer: {
          type: 'shadow'
        },
        data: []
      },
      yAxis: [
        {
          type: 'value',
          name: '次数',
          min: 0,
          max: 150,
          axisLabel: {
            formatter: '{value} 次'
          }
        },
        {
          type: 'value',
          name: '金额',
          min: 0,
          max: 200,
          axisLabel: {
            formatter: '{value} 万元'
          }
        }
      ],
      series: []
    }
  ]

  public lineres = []

  public lineres1 = []

  ngOnInit() {
    this.apiService.getEventAnalysis().subscribe(data => {
      this.eventList = data.rank
      this.customerList = data.customerList
      this.lineres = data.lineres
      this.lineres1 = data.lineres1
      this.loadEchart(this.lineres)
      this.loadEchart1(this.lineres1)
    })
  }

  loadEchart(res: any) {
    this.loading = true
    const linechartData = []
    const linechartXdata: Array<any> = []

    this.legengs.forEach((item, index) => {
      const item1 = {
        name: item,
        smooth: true,
        type: 'bar',
        stack: '合计',
        data: []
      }
      linechartData.push(item1)
    })

    const item = {
      name: '发生金额',
      smooth: true,
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
    linechartData.push(item)

    for (let k = 0; k < res.length; k++) {
      linechartXdata.push(res[k]['dataDate'])
    }
    const set = new Set(linechartXdata)
    const dateList = Array.from(set)

    const newLegends = []
    this.legengs.forEach((item, index) => {
      for (let n = 0; n < res.length; n++) {
        linechartData[index].data.push(res[n]['a' + (index + 1)])
      }
      newLegends.push(item)
    })

    for (let n = 0; n < res.length; n++) {
      var total = 0
      this.legengs.forEach((item, index) => {
        total += res[n]['b' + (index + 1)]
      })

      linechartData[this.legengs.length].data.push(total)
    }

    newLegends.push('发生金额')

    this.lineOption[1] = {
      legend: {
        data: newLegends
      },
      xAxis: {
        data: dateList
      },
      series: linechartData
    }
    this.loading = false
  }

  loadEchart1(res: any) {
    this.loading = true
    const linechartData = []
    const linechartXdata: Array<any> = []

    this.legengs1.forEach((item, index) => {
      const item1 = {
        name: item,
        smooth: true,
        type: 'bar',
        stack: '合计',
        data: []
      }
      linechartData.push(item1)
    })

    const item = {
      name: '发生金额',
      smooth: true,
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
    linechartData.push(item)

    for (let k = 0; k < res.length; k++) {
      linechartXdata.push(res[k]['dataDate'])
    }
    const set = new Set(linechartXdata)
    const dateList = Array.from(set)

    const newLegends = []
    this.legengs1.forEach((item, index) => {
      for (let n = 0; n < res.length; n++) {
        linechartData[index].data.push(res[n]['a' + (index + 1)])
      }
      newLegends.push(item)
    })

    for (let n = 0; n < res.length; n++) {
      var total = 0
      this.legengs1.forEach((item, index) => {
        total += res[n]['b' + (index + 1)]
      })

      linechartData[this.legengs1.length].data.push(total)
    }

    newLegends.push('发生金额')

    this.lineOption1[1] = {
      legend: {
        data: newLegends
      },
      xAxis: {
        data: dateList
      },
      series: linechartData
    }
    this.loading = false
  }

  twoHandle(index: number): void {
    this.twoIndex = index
  }
}
